export const esyUiClassNames = {
    badge_cn: {
        box: "relative inline-block",
        dot: "absolute z-10 rounded-lg text-white bg-error text-center text-mini py-0 px-1 top-0 right-0 translate-x-1/2 -translate-y-1/2",
        "dot:show": "inline-block w-2 h-2",
        "dot:hidden": "py-0 px-1",
        hidden: "hidden"
    },
    button_cn: {
        box: "flex items-center relative overflow-hidden whitespace-nowrap outline-none duration-200 transition-shadow transition-colors cursor-pointer active:shadow-focus-box",
        "box:mini": "text-xs py-0 px-1 h-6 rounded-sm",
        "box:small": "text-xs py-0 px-2 h-8",
        "box:normal": "text-sm py-0 px-3 h-10",
        "box:large": "text-base py-0 px-5 h-12",
        "box:default": "text-primary-text bg-default border-transparent",
        "box:primary": "text-white bg-primary border-transparent",
        "box:link": "text-primary border-transparent",
        "box:ghost": "text-primary hover:bg-hover border-primary border",
        "box:success": "text-white bg-success border-transparent",
        "box:warning": "text-white bg-warning border-transparent",
        "box:error": "text-white bg-error border-transparent",
        "box:disabled": "text-disabled-text bg-disabled shadow-none cursor-not-allowed border-transparent"
    },
    cell_cn: {
        box: "flex items-center py-2 px-3 relative overflow-hidden",
        "box:border-bottom": "border-b border-split",
        "box:border": "border border-split",
        "box:border-none": "border-0",
        "box:card": "border-b border-split bg-white text-primary-text shadow",
        content: "flex-1 m-x-10",
        "content:title": "text-primary-text text-base",
        "content:desc": "text-desc text-mini"
    },
    checkbox_cn: {
        box: "flex items-center",
        disabled: "cursor-not-allowed text-disabled-text",
        value: "relative w-5 h-5 border border-soild duration-200 transition-colors",
        "value:hover": "border-split bg-ipt-bg hover:border-input-hover focus-within:border-primary  focus-within:hover:border-primary",
        "value:disabled": "bg-disabled border-bdr-disabled",
        "value:checked": "border-primary bg-primary animate-checked-animate after:border-l-2 after:border-b-2 after:border-white after:absolute after:w-7/10 after:h-2/5 after:translate-x-13/50 after:translate-y-3/5 after:-rotate-45",
        label: "mx-2.5 text-mini text-ipt-label",
        checkbox: "absolute z-1 inset-0 w-full h-full opacity-0 pointer-events-none peer"
    },
    collapse_cn: {
        box: "relative w-full z-0",
        item: "relative duration-200 transition-colors h-auto",
        "item:disabled": "bg-disabled text-disabled-text cursor-not-allowed",
        "item:nodisabled": "cursor-pointer",
        "item:title": "flex items-center relative outline-none text-sm text-text-1 justify-between hover:text-focus py-3 px-2",
        "item:border": "border border-split",
        "item:content": "overflow-hidden transition-all duration-200",
        "item:content:child": "text-xs"
    },
    countdown_cn: {
        box: "",
        split: "",
        time: ""
    },
    dateselect_cn: {
        box: "w-64",
        header: "flex items-center justify-between py-2 px-3",
        icons: "flex items-center justify-between",
        icon: "mx-1 text-desc hover:text-hover cursor-pointer",
        title: "text-center text-xs cursor-pointer text-primary hover:text-hover",
        year: "mr-3",
        month: "",
        content: "transition-transform duration-300 w-full flex",
        "content:months": "-translate-x-full",
        "content:years": "-translate-x-2/1",
        monthbox: "min-w-full flex flex-wrap border-t border-split px-3 py-2",
        yearbox: "min-w-full flex flex-wrap border-t border-split px-3 py-2",
        tablebox: "min-w-full border-t border-split px-3 py-2",
        ymchild: "flex-1/3 text-center text-primary cursor-pointer",
        text: "m-1 px-3 py-1 leading-6",
        "text:hover": "hover:bg-hover",
        "text:active": "text-white bg-ipt-focus",
        table: {
            header: "table-header-group text-base text-primary",
            tbody: "flex-1 overflow-auto",
            "tr:body": "",
            td: "table-cell text-center py-1"
        },
        day: "w-6 h-6 mx-1 leading-6 border text-xs",
        "day:show": "hover:bg-hover cursor-pointer border-transparent",
        "day:hidden": "text-desc hover:bg-hover cursor-pointer border-transparent",
        "day:disabled": "text-disabled-text bg-disabled cursor-not-allowed border-transparen",
        "day:selected": "bg-primary text-white cursor-pointer border-primary",
        "day:today": "border-primary border cursor-pointer",
        footer: "flex items-center justify-between py-2 px-3 border-t border-split"
    },
    datepicker_cn: {
        title: "relative",
        range: "flex items-center justify-center",
        ipt: {},
        picker: {},
        split: "mx-2"
    },
    dialog_cn: {
        mask: "fixed left-0 right-0 top-0 bottom-0 z-1000 bg-mask",
        "mask:center": "flex items-center justify-center",
        box: "fixed z-1000 bg-white",
        "box:right": "right-0 top-0 min-w-60 h-full rounded-l-lg",
        "box:right:apper": "animate-translate-x-100-0",
        "box:right:disapper": "animate-translate-x-0-100",
        "box:left": "left-0 top-0 min-w-48 h-full rounded-r-3xl",
        "box:left:apper": "animate-translate-x-m100-0",
        "box:left:disapper": "animate-translate-x-0-m100",
        "box:top": "min-h-48 w-full top-0 left-0 right-0 rounded-b-3xl",
        "box:top:apper": "animate-translate-y-m100-0",
        "box:top:disapper": "animate-translate-y-0-m100",
        "box:bottom": "min-h-48 w-full bottom-0 left-0 right-0 rounded-t-3xl",
        "box:bottom:apper": "animate-translate-y-100-0",
        "box:bottom:disapper": "animate-translate-y-0-100",
        "box:center": "max-w-80 max-h-64 rounded-lg overflow-hidden left-0 right-0 top-0 bottom-0 m-auto",
        "box:center:apper": "animate-zoom-0-100",
        "box:center:disapper": "animate-zoom-100-0",
        body: "w-full py-2",
        header: "flex items-center",
        "header:inclose": "justify-between",
        "header:noclose": "justify-center",
        "close:icon": "cursor-pointer px-2 py-2 text-sm text-primary absolute right-0 top-0",
        footer: ""
    },
    dragsize_cn: {
        box: "flex relative h-full select-none",
        before: "min-w-8 h-full pr-4",
        "before:y": "w-full pb-4",
        drag: {
            "box:nodisabled": "cursor-ew-resize"
        },
        "drag:y": {
            "box:nodisabled": "cursor-ns-resize w-full"
        }
    },
    drag_cn: {
        box: "absolute inline-block z-1 touch-none select-none",
        "box:disabled": "bg-disabled text-disabled-text cursor-not-allowed",
        "box:nodisabled": "cursor-pointer"
    },
    ellipsis_cn: {
        box: "relative text-justify before:inline-block before:float-right transition-height duration-200",
        btn: "float-right clear-both text-ipt-focus cursor-pointer"
    },
    emoipt_cn: {
        box: "flex items-center",
        input: "box-content flex-1 p-1 bg-label outline-none border-0 caret-primary select-auto text-xs max-h-12 overflow-y-auto",
        expand: "",
        img: "inline-block w-4 h-4 mr-px align-top"
    },
    fab_cn: {
        box: "fixed transition-transform scale-0 duration-200",
        "box:show": "scale-100 cursor-pointer",
        "box:hidden": "scale-0 cursor-pointer",
        "box:bottom-right": "bottom-2.5 right-2.5",
        "box:bottom-left": "bottom-2.5 left-2.5",
        "box:top-right": "top-2.5 right-2.5",
        "box:top-left": "top-2.5 left-2.5",
        content: "flex items-center justify-center relative w-12 h-12 rounded-full overflow-hidden z-1",
        "content:default": "bg-default text-primary-text",
        "content:primary": "bg-primary text-white",
        "content:success": "bg-success text-white",
        "content:warning": "bg-warning text-white",
        "content:error": "bg-error text-white",
        "content:disabled": "bg-disabled text-disabled-text cursor-not-allowed",
        "content:show": "shadow-card",
        "content:hidden": "shadow-none",
        expand: "absolute flex items-center justify-center transition-opacity transition-transform duration-200",
        "expand:top": "bottom-full left-0 w-full",
        "expand:top:show": "opacity-100 translate-y-0",
        "expand:top:hiddle": "opacity-0 translate-y-1/2",
        "expand:top:dirc": "flex-col-reverse",
        "expand:bottom": "top-full left-0 w-full",
        "expand:bottom:show": "opacity-100 translate-y-0",
        "expand:bottom:hiddle": "opacity-0 -translate-y-1/2",
        "expand:bottom:dirc": "flex-col",
        "expand:left": "right-full top-0 h-full",
        "expand:left:show": "opacity-100 translate-x-0",
        "expand:left:hiddle": "opacity-0 translate-x-1/2",
        "expand:left:dirc": "flex-row-reverse",
        "expand:right": "left-full top-0 h-full",
        "expand:right:show": "opacity-100 translate-x-0",
        "expand:right:hiddle": "opacity-0 -translate-x-1/2",
        "expand:right:dirc": "flex-row"
    },
    form_cn: {
        box: "",
        item: "flex flex-1 mb-4",
        label: "relative flex items-center",
        labeltext: "w-24 text-justify text-nowrap text-label text-last-justify",
        colon: 'after:content-[":"] after:text-label after:mr-2',
        required: 'before:content-["*"] before:text-error before:absolute before:-left-2',
        control: "relative w-full",
        "error:def": "text-mini text-error transition-all duration-300",
        "error:show": "mt-0 h-4 leading-4 translate-y-0 opacity-100",
        "error:hidden": "-translate-y-1.5 opacity-0",
        "error:offset": "-mb-4"
    },
    flex_cn: {
        box: "w-full",
        row: "flex flex-wrap w-full border-l border-b",
        col: "p-1 border-r border-t text-center text-primary"
    },
    scrollx_cn: {
        box: "flex flex-1 shrink-0 whitespace-nowrap overflow-hidden relative min-h-10",
        list: "absolute text-primary-text whitespace-pre",
        animation: "animate-scroll-x animate-running hover:animate-paused",
        text: "mr-3"
    },
    iframe_cn: {
        box: "w-full",
        iframe: "border-0 m-0 p-0 overflow-hidden"
    },
    img_cn: {
        box: "bg-no-repeat",
        img: "block h-full m-auto"
    },
    input_cn: {
        box: "flex items-center relative transition-colors duration-300",
        "box:outlined:normal": "border-split cursor-text bg-white hover:border-focus focus-within:border-focus focus-within:shadow-focus-box",
        "box:outlined:error": "border-error cursor-text bg-white text-error",
        "box:outlined:bordered": "border border-solid",
        "box:outlined:nobordered": "border-0",
        disabled: "bg-disabled text-disabled-text cursor-not-allowed",
        "box:input:large": "py-2 px-4 h-12 text-lg",
        "box:input:normal": "py-1.5 px-3 h-10 text-sm",
        "box:input:small": "py-1.5 px-2 h-8 text-xs",
        "box:input:mini": "py-0 px-1 h-6 text-xs rounded-sm",
        "box:textarea:large": "text-lg",
        "box:textarea:normal": "text-base",
        "box:textarea:small": "text-sm",
        "box:textarea:mini": "text-xs",
        "textarea:large": "py-2 px-4 min-h-12",
        "textarea:normal": "py-1.5 px-3 min-h-10",
        "textarea:small": "py-1.5 px-3 min-h-8",
        "textarea:mini": "py-0 px-2 min-h-6",
        standard: "absolute z-1 w-full h-px bottom-0 right-0 transition-colors duration-300",
        "standard:normal": "bg-split peer-focus:bg-focus peer-focus:h-px peer-focus:animate-standard-line",
        "standard:error": "bg-error",
        input: "border-0 bg-transparent w-full caret-primary outline-none peer",
        label: "absolute pointer-events-none transition-all duration-100",
        "label:textarea:large": "top-2 left-4",
        "label:textarea:normal": "top-1.5 left-3",
        "label:textarea:small": "top-1.5 left-3",
        "label:textarea:mini": "top-0 left-2",
        "label:active": "-translate-x-1/5 -translate-y-17/20 scale-75 bg-white text-primary peer-focus:text-focus",
        "label:noactive": "translate-x-0 translate-y-0 scale-100 bg-transparent text-ipt-label",
        maxlength: "ml-2",
        currentlength: "text-focus",
        clear: "inline-block text-clear ml-2 cursor-pointer",
        clearfixed: "absolute right-0 top-0 mr-2 mt-2",
        "password:icon": "text-primary hover:text-input-hover cursor-pointer"
    },
    link_cn: {
        box: "text-xs",
        "box:default": "text-primary-text cursor-pointer",
        "box:primary": "text-primary cursor-pointer",
        "box:success": "text-success cursor-pointer",
        "box:warning": "text-warning cursor-pointer",
        "box:error": "text-error cursor-pointer",
        "box:disabled": "text-disabled-text cursor-not-allowed",
        "box:underline:none": "no-underline",
        "box:underline:hover": "no-underline hover:underline",
        "box:underline:always": "underline"
    },
    loading_cn: {
        box: "flex items-center",
        "box:spinner": "relative inline-block w-6 h-6 max-h-full max-w-full align-middle steps-12 animate-rotate-0-360",
        "child:cube": "w-2 h-2 bg-primary m-0.5 rounded-none animate-cube cube",
        "child:circle": "w-2 h-2 bg-primary m-0.5 rounded-full animate-opacity-100-0 circle",
        "child:wave": "w-1 h-2 bg-primary m-0.5 rounded-none animate-scale-y-1-2 wave",
        "child:spinner": "absolute top-0 left-0 w-full h-full text-primary before:block before:w-0.5 before:h-1/4 before:bg-current before:rounded-2/5 before:mx-auto before:my-0 spinner"
    },
    message_cn: {
        box: "flex items-center text-center mb-5 mt-6 bg-white shadow-card rounded px-4 py-2 text-text-1 text-xs animate-move-down-to-up",
        mask: "w-screen h-screen fixed top-0 left-0 flex flex-col items-center py-5 z-1000 pointer-events-none",
        "icon:success": "text-success text-xs mr-2",
        "icon:warn": "text-warning mr-2",
        "icon:error": "text-error mr-2"
    },
    numberkeyboard_cn: {
        box: "w-full flex flex-wrap bg-disabled",
        li: "w-1/3 border-split flex items-center justify-center h-12",
        linumber: "border-b bg-white text-lg",
        licenter: "border-x bg-white text-lg",
        clear: ""
    },
    pagination_cn: {
        box: "flex items-center list-none select-none",
        disabled: "bg-disabled text-disabled-text cursor-not-allowed shadow-none border-bdr-disabled",
        prev: "",
        previcon: "",
        prevmore: "cursor-pointer",
        prevmoreicon: "",
        moreicon: "relative mr-4 text-ipt-focus",
        moreiconmask: "absolute inset-0 block m-auto text-desc bg-white text-center opacity-100 transition-all duration-200 hover:opacity-0 tracking-widest",
        next: "",
        nexticon: "",
        nextmore: "cursor-pointer",
        nextmoreicon: "",
        page: "flex items-center justify-center bg-transparent border mr-4 last:m-0",
        "page:active": "text-ipt-focus border-ipt-focus",
        "page:hover": "cursor-pointer text-primary-text border-split hover:border-input-hover",
        "page:small": "min-w-8 min-h-8 w-8 h-8",
        "page:mini": "min-w-6 min-h-6 w-6 h-6",
        pagesize: "max-w-28",
        sizeselect: {},
        jumpinput: {
            box: "flex items-center relative transition-colors duration-300 mx-4"
        },
        pagejump: "flex items-center text-nowrap break-keep whitespace-nowrap ml-4 max-w-32"
    },
    passwordinput_cn: {
        box: "flex items-center relative",
        li: "w-8 h-8 bg-label text-center ml-2 first:ml-0 rounded relative flex items-center justify-center",
        mask: "w-2 h-2 absolute rounded-full bg-primary left-1/2 top-1/2 -ml-1 -mt-1",
        cursor: "h-1/2 w-px bg-primary animate-cursor-flicker"
    },
    picker_cn: {
        box: "w-full transition-colors duration-300",
        input: {
            box: "flex items-center relative transition-border-bg-color duration-300",
            input: "border-0 bg-transparent w-full outline-none placeholder:text-pld-color placeholder:text-pld-font peer truncate"
        },
        suffix: "text-icon text-base transition-all duration-300",
        "suffix:expand": "rotate-180",
        "suffix:retract": "rotate-0",
        header: "flex items-center justify-between text-sm text-primary-text mb-2.5 bg-transparent",
        cancel: "cursor-pointer px-3 py-1",
        confirm: "text-primary px-3 py-1 cursor-pointer",
        content: "flex items-center justify-between relative text-sm text-primary-text cursor-grab h-60",
        mask: "absolute pointer-events-none top-0 left-0 w-full h-full bg-no-repeat bg-white-gray-1 bg-top-bottom",
        picked: "absolute w-full left-0 border-y border-split pointer-events-none z-1 transition-border duration-300",
        column: "flex-1 text-center overflow-hidden h-full",
        "column:active": "text-ipt-focus",
        scroll: "pb-25",
        item: "px-1 truncate"
    },
    progress_cn: {
        box: "flex items-center justify-between",
        linear: "rounded w-full h-2 bg-split flex-1",
        circle: "",
        "linear:percent": "rounded bg-primary h-full transition-width duration-200",
        "circle:percent": "",
        label: "w-12 text-right"
    },
    qrcode_cn: {
        box: "mx-auto flex rounded-xl"
    },
    radio_cn: {
        box: "flex items-center text-sm",
        disabled: "cursor-not-allowed text-disabled-text border-bdr-disabled",
        label: "mr-5 ml-2.5",
        value: "relative w-5 h-5 border-2 rounded-full transition-colors duration-200",
        "value:disabled": "border-bdr-disabled hover:border-bdr-disabled bg-disabled",
        "value:hover": "border-split hover:border-input-hover focus-within:border-primary focus-within:hover:border-primary",
        "value:checked": "border-primary bg-transparent animate-checked-animate after:w-[55.55%] after:h-[55.55%] after:absolute after:bg-primary after:rounded-full after:translate-x-2/5 after:translate-y-2/5",
        radio: "absolute z-1 inset-0 w-full h-full opacity-0 pointer-events-none peer"
    },
    scrollbox_cn: {
        box: "flex-1 overflow-x-hidden overflow-y-auto",
        more: "text-mini text-primary flex items-center justify-center",
        loading: {
            "box:spinner": "relative inline-block w-4 h-4 max-h-full max-w-full align-middle steps-12 animate-rotate-0-360",
            "child:spinner": "absolute top-0 left-0 w-full h-full text-gray before:block before:w-0.5 before:h-1/4 before:bg-current before:rounded-2/5 before:mx-auto before:my-0 spinner"
        }
    },
    group_cn: {
        box: "w-full h-full flex item-center",
        item: "flex item-center",
        "item:x": "mr-5 last:m-0",
        "item:y": "block mb-2.5"
    },
    select_cn: {
        box: "relative",
        input: {
            box: "flex items-center relative transition-border-bg-color duration-300"
        },
        "input:expand": "",
        "input:retract": "",
        suffix: "text-icon text-xs transition-all duration-300",
        "suffix:expand": "rotate-180",
        "suffix:retract": "rotate-0",
        value: "absolute top-0.5 bottom-0.5 flex items-center max-w-full pointer-events-none z-1",
        "value:expand": "",
        "value:retract": "",
        "value:mini": "px-2 text-xs",
        "value:small": "px-3 text-sm",
        "value:normal": "px-3 text-base",
        "value:large": "px-4 text-lg",
        dropwrap: "relative w-full h-0",
        dropdown: "absolute cursor-default left-0 z-100 w-full bg-white top-0 overflow-hidden transition-all ease-in-out duration-300 ease-in-out border-x border-b border-ipt-focus",
        "dropdown:expand": "max-h-64 shadow-md",
        "dropdown:retract": "max-h-0 shadow-none invisible",
        options: "max-h-64 transition-transform transition-opacity duration-200 overflow-x-hidden overflow-y-auto",
        "options:expand": "opacity-100 translate-y-0 delay-200",
        "options:retract": "opacity-0 translate-y-4 delay-100",
        option: "border-b border-split cursor-pointer transition-all duration-250 flex items-center justify-between text-left hover:bg-hover last:border-0",
        "option:active": "text-primary",
        "option:mini": "py-1 px-2.5 text-xs",
        "option:small": "py-1 px-2.5",
        "option:normal": "py-2 px-2.5",
        "option:large": "py-2.5 px-2.5",
        optiontext: "",
        selectedicon: "text-primary",
        empty: "flex items-center justify-center py-1",
        selected: "",
        "selected:mul": "",
        "selected:sin": ""
    },
    skeleton_cn: {
        card: "relative overflow-hidden w-full h-40 mb-2.5 rounded bg-split transition-colors duration-200",
        animation: "after:top-0 after:left-0 after:absolute after:w-full after:h-full after:z-1 after:transition-colors after:duration-200 after:animate-skeleton after:bg-skeleton",
        avatar: "relative overflow-hidden w-8 h-8 mr-2.5 rounded-full bg-split transition-colors duration-200",
        rows: "relative overflow-hidden h-3 mb-2.5 rounded bg-split transition-colors duration-200"
    },
    switch_cn: {
        box: "inline-flex items-center",
        "label:left": "mr-2.5",
        "label:right": "ml-2.5",
        "label:error": "text-error",
        value: "relative border-0 outline-none",
        "value:error": "bg-error",
        "value:disabled": "cursor-not-allowed opacity-60",
        "value:nodisabled": "cursor-pointer",
        track: "flex items-center justify-center transition-all transition-filter duration-300 rounded-full opacity-80",
        "track:large": "w-12 h-6",
        "track:large:active": "bg-primary",
        "track:large:noactive": "bg-label",
        "track:normal": "w-10 h-5",
        "track:normal:active": "bg-primary",
        "track:normal:noactive": "bg-label",
        "track:small": "w-8 h-4",
        "track:small:active": "bg-primary",
        "track:small:noactive": "bg-label",
        "track:mini": "w-6 h-3",
        "track:mini:active": "bg-primary",
        "track:mini:noactive": "bg-label",
        slider: "bg-white transition-all duration-300 rounded-full absolute scale-85 top-0",
        "slider:large": "w-6 h-6",
        "slider:large:active": "left-1/2",
        "slider:large:noactive": "left-0",
        "slider:normal": "w-5 h-5",
        "slider:normal:active": "left-1/2",
        "slider:normal:noactive": "left-0",
        "slider:small": "w-4 h-4",
        "slider:small:active": "left-1/2",
        "slider:small:noactive": "left-0",
        "slider:mini": "w-3 h-3",
        "slider:mini:active": "left-1/2",
        "slider:mini:noactive": "left-0"
    },
    table_cn: {
        box: "flex flex-col w-full h-full",
        table: "w-full table border-collapse table-fixed",
        header: "table-header-group text-base text-primary-text bg-table-header",
        tbody: "flex-1 overflow-auto border-b border-split",
        "tr:header": "",
        body: "table-row-group text-primary-text text-sm",
        "tr:body": "hover:bg-primary-hover",
        footer: "table-footer-group text-desc text-xs",
        "tr:footer": "",
        tr: "table-row cursor-pointer",
        td: "table-cell px-3 py-2.5 border-split",
        "td:xy": "border",
        "td:x": "border-x",
        "td:y": "border-y",
        "td:xy:scroll": "border last:border-r-transparent",
        "td:x:scroll": "border-x last:border-r-transparent",
        "td:y:scroll": "border-y",
        "td:xy:first:body": "border-x border-b border-t-0",
        "td:y:first:body": "border-b border-t-0",
        "td:xy:last:body": "border-x border-t border-b-0",
        "td:y:last:body": "border-t border-b-0",
        "td:xy:scroll:first:body": "border-x border-b border-t-0 last:border-r-transparent",
        "td:y:scroll:first:body": "border-b border-t-0",
        "td:xy:scroll:last:body": "border-x border-t border-b-0 last:border-r-transparent",
        "td:y:scroll:last:body": "border-t border-b-0",
        "td:align:l": "text-left",
        "td:align:c": "text-center",
        "td:align:r": "text-right",
        "td:fixed": "sticky z-2",
        "td:cover": "table-cell w-1 right-0",
        "td:cover:xy": "border-r border-y border-split",
        "td:cover:x": "border-r border-split",
        "td:cover:y": "border-y border-split"
    },
    tabs_cn: {
        box: "flex w-full overflow-hidden",
        "box:horizontal": "flex-col",
        "box:vertical": "",
        titles: "relative text-base flex-nowrap",
        "titles:horizontal": "flex items-center justify-between overflow-x-auto overflow-y-hidden",
        "titles:vertical": "flex flex-col overflow-x-hidden overflow-y-auto",
        title: "text-center transition-all duration-250 z-1 relative overflow-hidden text-nowrap break-keep whitespace-nowrap flex-1-0-auto",
        "title:horizontal": "",
        "title:vertical": "",
        "title:disabled": "bg-disabled text-disabled-text cursor-not-allowed",
        "title:nodisabled": "cursor-pointer",
        "title:mini": "px-1 w-12 h-6",
        "title:small": "px-2.5 py-1 w-24 h-8",
        "title:normal": "px-3 py-1.5 w-20 h-9",
        "title:large": "px-5 py-2.5 w-25 h-10",
        "title:active": "text-primary-active",
        indicator: "absolute bg-primary-active rounded-3xl transition-left-top duration-250 z-1",
        "indicator:horizontal": "h-0.5 bottom-0",
        "indicator:vertical": "w-0.5 left-0",
        content: "text-sm",
        "content:horizontal": "w-full whitespace-nowrap",
        "content:vertical": "flex-1",
        contentitem: "w-full inline-block align-top",
        "contentitem:horizontal": "",
        "contentitem:vertical": "h-full"
    },
    tag_cn: {
        box: "inline-flex text-sm px-1 py-0.5 transition-transform transition-colors duration-200",
        "box:default": "border border-split text-primary-text bg-default",
        "box:primary": "bg-primary text-white",
        "box:primary:ghost": "bg-transparent text-primary border border-primary",
        "box:success": "bg-success text-white",
        "box:success:ghost": "bg-transparent text-success border border-success",
        "box:warning": "bg-warning text-white",
        "box:warning:ghost": "bg-transparent text-warning border border-warning",
        "box:error": "bg-error text-white",
        "box:error:ghost": "bg-transparent text-error border border-error",
        "box:checked": "bg-transparent transition-all duration-200 text-primary-text cursor-pointer hover:opacity-80",
        show: "scale-100",
        hiddle: "scale-0",
        close: "mx-1 cursor-pointer",
        "checked:active": "bg-primary text-white"
    },
    taost_cn: {
        box: "text-center flex items-center mt-2 mx-auto px-4 py-2 rounded bg-mask shadow-card text-white text-xs flex items-center",
        mask: "fixed z-1000 top-0 left-0 flex justify-center items-center w-screen h-screen",
        "mask:none": "pointer-events-none",
        "mask:auto": "pointer-events-auto",
        "icon:success": "text-success text-xs mr-2",
        "icon:warn": "text-warning text-xs mr-2",
        "icon:error": "text-error text-xs mr-2"
    },
    upload_cn: {
        box: "outline-none cursor-pointer",
        disabled: "bg-disabled text-disabled-text cursor-not-allowed"
    },
    scrolly_cn: {
        box: "flex-1 overflow-hidden h-6",
        list: "flex flex-col",
        transition: "transition-all duration-300",
        text: "cursor-pointer h-6"
    },
    dropdown_cn: {
        box: "relative",
        dropwrap: "relative w-full h-0",
        dropdown: "absolute cursor-default left-0 z-100 w-64 bg-white top-0 text-primary-text overflow-hidden transition-all ease-in-out duration-300 ease-in-out border-x border-b border-focus",
        "dropdown:expand": "max-h-80 shadow-md",
        "dropdown:retract": "max-h-0 shadow-none invisible",
        options: "max-h-80 transition-transform transition-opacity duration-200 overflow-x-hidden overflow-y-auto",
        "options:expand": "opacity-100 translate-y-0 delay-200",
        "options:retract": "opacity-0 translate-y-4 delay-100"
    },
    infinitescroll_cn: {
        box: "overflow-x-hidden overflow-y-auto h-full",
        "loading:box": "absolute bottom-2.5 left-0 right-0",
        loading: {
            "box:spinner": "relative inline-block w-4 h-4 max-h-full max-w-full align-middle steps-12 animate-rotate-0-360 mx-auto",
            "child:spinner": "absolute top-0 left-0 w-full h-full text-primary before:block before:w-0.5 before:h-1/4 before:bg-current before:rounded-2/5 before:mx-auto before:my-0 spinner"
        }
    }
}
